<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>订单管理</el-breadcrumb-item>
				<el-breadcrumb-item>申请换货</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<div class="content-box">
			<el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane label="基本信息" name="info">
						<div class="tab-content">
							<el-form-item prop="orderId" label="搜索订单">
								<el-select v-model="orderSelected" clearable filterable remote reserve-keyword
									value-key="id"
									placeholder="输入订单号关健字"
									:remote-method="remoteMethod"
									:loading="orderLoading"
									@change="handleOrderChange" style="width:100%;">
									<el-option v-for="item in orderOptions" :key="item.id"
										:label="item.orderNo"
										:value="item">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="会员账户" v-if="model.userName">
								{{model.userName}}
							</el-form-item>
							<el-form-item label="订单金额" v-if="orderSelected.orderAmount">
								{{orderSelected.orderAmount}} 元
							</el-form-item>
							<el-form-item label="订单状态" v-if="orderSelected.status">
								<span v-if="orderSelected.refundStatus==1">全部退款</span>
								<span v-else-if="orderSelected.refundStatus==2">部分退款</span>
								<span v-else-if="orderSelected.status==1">等待付款</span>
								<span v-else-if="orderSelected.status==2">等待发货</span>
								<span v-else-if="orderSelected.status==3">等待收货</span>
								<span v-else-if="orderSelected.status==4">订单签收</span>
								<span v-else-if="orderSelected.status==5">订单完成</span>
								<span v-else-if="orderSelected.status==6">订单取消</span>
								<span v-else-if="orderSelected.status==7">订单作废</span>
							</el-form-item>
							<el-form-item label="选择商品" v-if="orderSelected.orderGoods">
								<el-table ref="goodsTable" :data="orderSelected.orderGoods" border @selection-change="handleSelectionChange" class="table-form">
									<el-table-column type="selection" :selectable="checkSelecGoods" width="45" align="center"></el-table-column>
									<el-table-column label="商品名称" min-width="220">
										<template slot-scope="scope">
											<el-image class="pic" fit="contain" :src="$api.loadFile(scope.row.imgUrl)">
												<div slot="error" class="image-slot">
													<i class="el-icon-picture-outline"></i>
												</div>
											</el-image>
											<h4>{{scope.row.goodsTitle}}</h4>
											<span class="date">
												{{scope.row.goodsNo}}
											</span>
										</template>
									</el-table-column>
									<el-table-column prop="skuText" label="规格" min-width="120" show-overflow-tooltip></el-table-column>
									<el-table-column prop="realPrice" label="单价" width="80"></el-table-column>
									<el-table-column prop="quantity" label="数量" width="80"></el-table-column>
									<el-table-column label="状态" width="80" align="center">
										<template slot-scope="scope">
											<el-tag size="small" type="success" effect="dark" v-if="scope.row.deliveryStatus==1">已发货</el-tag>
											<el-tag size="small" type="info" effect="dark" v-else-if="scope.row.deliveryStatus==2">已退货</el-tag>
											<el-tag size="small" type="danger" effect="dark" v-else>待发货</el-tag>
										</template>
									</el-table-column>
								</el-table>
							</el-form-item>
							<el-form-item prop="applyReason" label="申请理由">
								<el-input type="textarea" :rows="3" v-model="model.applyReason" maxlength="512" show-word-limit placeholder="必填，512个字符内"></el-input>
							</el-form-item>
							<el-form-item label="申请凭证">
								<dt-upload-album v-model="albumList"></dt-upload-album>
							</el-form-item>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
		
		<div class="footer-box">
			<div class="footer-btn">
				<el-button type="primary" :loading="loading" @click="submitForm">确认保存</el-button>
				<el-button plain @click="$common.back()">返回上一页</el-button>
			</div>
		</div>
	</dt-main-body>
</template>

<script>
	import DtUploadAlbum from '../../../components/DtUploadAlbum.vue'
	
	export default {
		components: {
			DtUploadAlbum
		},
		props: {
			id: 0
		},
		data() {
			return {
				activeName: 'info', //当前选项卡
				labelPosition: 'right', //表单对齐方式
				loading: false,
				orderLoading: false,//加载效果
				orderOptions: [],//订单查询列表
				orderSelected: [],//订单对象
				albumList: [],//照片列表,修改赋值,保存取值
				model: {
					id: 0,
					merchantId: null,
					orderId: null,
					orderNo: null,
					userId: 0,
					userName: null,
					type: 2,
					applyReason: null,
					applyTime: null,
					handleStatus: 0,
					handleRemark: null,
					handleTime: null,
					refundMode: null,
					refundAmount: null,
					uExpressId: null,
					uExpressCode: null,
					uExpressTime: null,
					sExpressId: null,
					sExpressCode: null,
					sExpressTime: null,
					refundGoods: [],
					refundAlbums: []
				},
				rules: {
					orderId: [
						{ required: true, message: '请输入订单号', trigger: 'change' }
					],
					applyReason: [
						{ required: true, message: '请输入申请理由', trigger: 'blur' }
					],
					expressId: [
						{ required: true, message: '请选择物流公司', trigger: 'change' }
					],
					expressCode: [
						{ required: true, message: '请输入物流单号', trigger: 'blur' }
					],
				}
			}
		},
		methods: {
			//提交订单
			submitForm() {
				let _this = this; //当前页面
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['editForm'].validate((valid) => {
						if (valid) resolve()
					});
				});
				Promise.all([f1]).then(() => {
					//检查是否选择商品
					if (_this.model.refundGoods.length == 0) {
						_this.$message({ type: 'warning', message: '温馨提示，请选择需要更换的商品' });
						return false;
					}
					//相册取值
					let albumList = [];
					_this.albumList.map(function (item) {
						albumList.push({
							id: item.id,
							refundId: _this.model.id,
							thumbPath: item.thumbPath,
							originalPath: item.originalPath,
							remark: item.remark
						});
					})
					_this.model.refundAlbums = albumList;
					//提交表单
					_this.$api.request({
						method: 'post',
						url: '/admin/order/refund/2',
						data: _this.model,
						successMsg: '申请已提交成功',
						beforeSend() {
							_this.loading = true
						},
						success(res) {
							_this.$common.linkUrl('/order/exchange/list');
						},
						complete() {
							_this.loading = false
						}
					});
				})
			},
			//订单号搜索回调
			remoteMethod(query) {
				let _this = this;//当前页面
				if (query !== '') {
					let sendUrl = "/admin/order/view/5?keyword=" + encodeURI(query);
					_this.$api.request({
						url: sendUrl,
						beforeSend() {
							_this.orderLoading = true
						},
						success(res) {
							_this.orderOptions = res.data;
						},
						error(err) {
							_this.orderOptions = []
						},
						complete() {
							_this.orderLoading = false
						}
					});
				} else {
					this.orderOptions = [];
				}
			},
			//选中订单号回调
			handleOrderChange(val) {
				let _this = this;
				_this.model.orderId = val.id;
				_this.model.orderNo = val.orderNo;
				_this.model.userId = val.userId;
				_this.model.userName = val.userName;
				_this.model.refundGoods = [];
			},
			//设置不可选中的商品
			checkSelecGoods(row) {
				//未退货+已支付+非作废订单
				return row.deliveryStatus == 1 && this.orderSelected.status != 6;
			},
			//选中第几行商品
			handleSelectionChange(val) {
				let _this = this;
				_this.model.refundGoods = [];
				val.map((item, index) => {
					_this.model.refundGoods.push({
						id: 0,
						refundId: 0,
						orderGoodsId: item.id
					});
				});
			},
		},
	}
</script>